<template>
  <div class="news">
    <!-- 头部导航栏 -->

    <div class="header">
      <van-nav-bar style="background-image: linear-gradient(-20deg, #ddd6f3 0%, #faaca8 100%, #faaca8 100%);"
        title="咨讯详情" left-text="返回" left-arrow @click-left="onClickLeft" fixed />
      <div style="height: 40px"></div>
    </div>

    <!-- 主体内容区 -->
    <div class="container">
      <h2 class="title">{{ article.title }}</h2>
      <div class="title_sub">
        <span>
          <strong>所属栏目：</strong>
          {{ article.category && article.category.name }}
        </span>
        <span>
          <strong>发布时间：</strong>
          {{ article.publishTime | fmtDate }}
        </span>
      </div>
      <div class="content" v-html="article.content" />
      <!-- 文章内容 -->
    </div>
    <!-- 分享文章 -->
    <div style="float:right;margin-right:30px;margin-bottom:15px">
      <span style="color:#ccc">分享：</span>
      <van-icon name="share" color="#ff5000" size="25" @click="showShare=true" />
    </div>
    <!-- 点赞 -->
    <div style="float:right;margin-right:30px;margin-bottom:15px">
      <span style="color:#ccc">点赞数：</span>
      <span :style="colorthumUp">
        <van-icon name="star" size="25" :badge=article.thumpUp @click="addThumpUp" />
      </span>
    </div>
    <!-- 评论 -->
    <div class="comment">
      <van-field v-model="comment" type="textarea" rows="3" placeholder="请输入评论" />
    </div>
    <!-- 评论提交按钮 -->
    <van-button type="primary" @click="submitComment" class="submitBtn">提交</van-button>
    <!-- 评论列表 -->
    <div class="comment_list">
      <van-card v-for="comment in article.comments" :key="comment.id">
        <template #tags>
          <van-image round width="4rem" height="4rem" :src="comment.baseUser.userFace"
            style="float:left;margin-top:10px;" />
          <div style="margin-left: 70px;margin-top:10px; padding: 0 0.5em">
            <div style="line-height: 2em">
              <strong>{{ comment.baseUser.realname }}</strong>
            </div>
            <div style="line-height: 2em">{{ comment.comment }}</div>
            <div style="line-height: 2em">
              评论时间： {{ comment.commentTime | fmtDate }}
            </div>
          </div>
        </template>
      </van-card>
    </div>
    <!-- 占位 -->
    <div style="height: 90px"></div>

    <!-- 分享面板 -->
    <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
  </div>
</template>

<script>
  import {
    get,
    post
  } from "@/http/axios";
  import {
    mapActions,
    mapState
  } from "vuex";
  export default {
    data() {
      return {
        id: "",
        article: {},
        comment: "",
        showShare: false,
        options: [
          [{
              name: '微信',
              icon: 'wechat'
            },
            {
              name: '朋友圈',
              icon: 'wechat-moments'
            },
            {
              name: '微博',
              icon: 'weibo'
            },
            {
              name: 'QQ',
              icon: 'qq'
            },
          ],
          [{
              name: '复制链接',
              icon: 'link'
            },
            {
              name: '分享海报',
              icon: 'poster'
            },
            {
              name: '二维码',
              icon: 'qrcode'
            },
            {
              name: '小程序码',
              icon: 'weapp-qrcode'
            },
          ],
        ],
        colorthumUp: ''
      };
    },
    computed: {
      // 引入用户信息对象
      ...mapState("user", ["userInfo"]),
    },
    methods: {
      // 引入用户数据
      ...mapActions("user", ["getUserInfo"]),
      // 点击分享选项
      onSelect(option) {
        this.$toast(option.name + '分享成功');
        this.showShare = false;
      },
      // 点赞
      async addThumpUp() {
        if (this.colorthumUp == 'color:#ccc') {
          let data = {
            id: this.id
          }
          this.colorthumUp = 'color:red'
          let res = await get('/index/thumbUpArticle', data)
          this.loadArticle(this.id);
        }

      },
      //   加载文章详情
      async loadArticle(id) {
        let res = await get("/article/findById", {
          id
        });
        this.article = res.data.data;
      },
      // 提交评论
      async submitComment() {
        let data = {
          comment: this.comment,
          userId: this.userInfo.id,
          articleId: this.id,
        };
        console.log(data);
        if (this.comment && this.comment.length > 5) {
          let res = await post("/comment/saveOrUpdate", data);
          this.loadArticle(this.id)
          this.$toast.success("评论成功!");
        } else {
          this.$toast.fail("评论长度不足5个字,请重新输入！");
        }
        // 清空评论
        this.comment = "";
      },
      //   返回按钮
      onClickLeft() {
        this.$router.go(-1);
      },
    },
    created() {
      this.id = this.$route.query.id;
      // 加载文章内容
      this.loadArticle(this.id);
      this.getUserInfo();
      this.colorthumUp = 'color:#ccc'
    },
  };
</script>

<style scoped>
  .submitBtn {
    margin-right: 20px;
    margin-top: 10px;
    height: 35px;
    float: right;
  }

  .comment_list {
    clear: both;
  }

  .comment {
    clear: both;
    width: 95%;
    border: 1px solid #dcdfe6;
    margin: 0 auto;
  }

  .container {
    padding: 20px;
  }

  .container .title {
    text-align: center;
  }

  .content>>>img {
    width: 250px;
    height: 210px;
  }

  .title_sub {
    color: #999;
    font-size: 13px;
    text-align: center;
    margin-bottom: 15px;
  }

  /deep/ .van-nav-bar__title {
    color: #fff;
  }

  /deep/ .van-nav-bar__text {
    color: #fff;
  }

  /deep/ .van-icon-arrow-left {
    color: #fff;
  }
</style>